<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			ul.pagination {
				display:inline-block;
				padding:0px;
				margin:0px;
			}
			
			ul.pagination li {
				display:inline;
			}
			
			ul.pagination li a {
				color:black;
				float:left;
				padding:8px 16px;
				text-decoration:none;
				transition: background-color .3s;
				border: 1px solid #ddd;
				font-size: 18px;
			}
			
			
			ul.pagination li a.active {
				background-color:#eee;
				color:white;
				border: 1px solid #ddd;
			}
			
			ul.pagination li a:hover:not(.active) {background-color: #ddd;}
			
			div.center {text-align: center;}
		</style>
	</head>
		<p>上一页，下一页按钮:</p>
		<ul class="pagination"> 
		  <li><a href="#">首页</a></li>
		  <li><a href="#">下一页</a></li>
		  <li><a href="#" style="padding:0px;"> 
		  			<input type="text" style="height:37.5px;border:0px;width:50px;text-align:center;" value="1"> 
		  </a></li> 
		  <li><a href="#">上一页</a></li>
		  <li><a href="#">尾页</a></li> 
		   <li><a href="#" style="padding:0px;"> 
		  			<select style="height:39.5px;border:1px;width:50px;text-align: center;">
		  				<option>5</option>
		  				<option>10</option>
		  				<option selected="selected">20</option>
		  				<option>40</option>
		  				<option>60</option>
		  				<option>80</option>
		  				<option>100</option> 
		  			</select>
		  </a></li> 
		  <li><a href="#">共100页</a></li>
		</ul>
 
		<p>分页导航:</p>
		<ul class="pagination">
		  <li><a href="#" class="active">Home</a></li>
		  <li><a href="#">Link 1</a></li>
		  <li><a href="#">Link 2</a></li>
		  <li><a href="#">Link 3</a></li>
		</ul>
	<body >
	</body>
</html> 
 